<template>
  <div id="components-layout-demo-basic">

    <a-layout :style="{height:heightTable,overflow:'scroll',backgroundColor:'white'}">
      <!--      页眉部分-->
      <a-layout-header>
        <div class="head_group">
          <a-button @click="back">返回</a-button>
          <a-button style="float:right;" @click="save('project')">保存</a-button>
        </div>
        <hr color="#00a0e9"/>
      </a-layout-header>
      <a-layout-content>
        <a-form-model ref="project" :model="project" :rules="rules">
          <a-row style="margin-bottom: 30px;">
            <a-col :span="12">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="项目名称"
                prop="projectName"
              >
                <a-input v-model="project.projectName" type="text" size="large" placeholder="项目名称" :style="widthLayout"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="项目人数"
                prop="projectNum"
              >
                <a-input v-model="project.projectNum" type="text" size="large" placeholder="项目人数" :style="widthLayout"/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <a-form-model-item
                :label-col="formItemLayout.labelColTextarea"
                :wrapper-col="formItemLayout.wrapperColTextarea"
                label="项目描述"
                prop="projectDescribe"
              >
                <a-textarea v-model="project.projectDescribe" placeholder="项目描述不能超过200个字符" :rows="4" :maxLength="200"/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <a-form-model-item
                :label-col="formItemLayout.labelColTextarea"
                :wrapper-col="formItemLayout.wrapperColTextarea"
                label="项目职责"
                prop="projectResponsibility"
              >
                <a-textarea v-model="project.projectResponsibility" placeholder="项目职责不能超过200个字符" :rows="4" :maxLength="200" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <a-form-model-item
                :label-col="formItemLayout.labelColTextarea"
                :wrapper-col="formItemLayout.wrapperColTextarea"
                label="项目备注"
              >
                <a-textarea v-model="project.remarks" placeholder="项目备注不能超过200个字符" :rows="4" :maxLength="200" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>

    import {getAction,postAction,putAction,deleteAction} from '@/api/manage'

    //布局占据的位数
    const formItemLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 12 },
        labelColTextarea: { span: 2 },
        wrapperColTextarea: { span: 16 },
    };

    //已占领的高度
    let occupyHeight = 230;

    export default {
        name: "Details",
        data(){
            return{
                //控件占一半位置
                widthLayout:{
                    width:'60%',
                },
                //报错成功或返回跳转的panekey
                paneKey:1,
                //控件是否能编辑
                isDisabled:true,
                heightTable:0,
                //布局占据的位数
                formItemLayout,
                //项目数据
                project: {
                    id:null,
                    basicId:null,
                    projectName:null,
                    projectNum:null,
                    projectDescribe:null,
                    projectResponsibility:null,
                    remarks:null
                },
                // 校验规则
                rules: {
                    projectName: [
                        { required: true, message: '项目名称不能为空', trigger: 'blur' },
                    ],
                    projectNum:[
                        { required: true, message: "项目人数不能为空", trigger: 'blur' },
                    ],
                    projectDescribe:[
                        { required: true, message: "项目描述不能为空", trigger: 'change' },
                    ],
                    projectResponsibility:[
                        { required: true, message: "项目职责不能为空", trigger: 'blur' },
                    ]
                },
                //是否有基本信息
                isExists:false,
            }
        },
        methods: {
            reset(){
                let that = this;
                that.project.projectName = null;
                that.project.projectNum = null;
                that.project.projectDescribe = null;
                that.project.projectResponsibility = null;
                that.project.remarks = null;
            },
            //获取父组件中isDisable
            isDisable(isDisabled){
                this.isDisabled = isDisabled;
            },
            back(){
                // this.$router.push("/internship/details/"+this.project.basicId);
                this.reset();
                this.$emit('router-pane',this.paneKey,this.project.basicId);
            },
            //保存数据
            save(formName){
                if(!this.isExists){
                    this.$message.info('不存在基本信息，请先填完基本信息保存后再填写！');
                    return;
                }
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        //保存   交给后端判断是保存还是更新，如果有id就是更新，没有就是保存
                        let that = this;
                        this.$confirm({
                            title: '保存',
                            content: h => '是否提交保存？',
                            onOk() {
                                postAction("/project/project/save",that.project).then(res=>{
                                    that.$message.success(
                                        '保存成功!',
                                        10,
                                    );
                                    that.reset();
                                    // that.$router.push("/internship/details/"+that.project.basicId);
                                    that.$emit('router-pane',that.paneKey,that.project.basicId)
                                })
                            },
                            onCancel() {
                                console.log('Cancel');
                            },
                        });

                    } else {
                        this.$message.info('信息填写不完整，请填写完成再提交！');
                        return false;
                    }
                });
            },
            getinfo(){
                let that = this;
                getAction("/project/project/info/"+this.project.id).then(res=>{
                    that.project = res.result;
                })
            },
            //编辑时，传递的id
            getId(basicId,id){
                //校验清除
                this.$refs.project.resetFields()
                if(basicId>0){
                    //已有基本信息，可以添加信息
                    this.isExists=true;
                    this.project.basicId = basicId;
                }else{
                    //还没有基本信息 ，无法添加其他信息
                    this.isExists=false;
                }
                if(id>0){
                    this.project.id = id;
                    this.getinfo();
                }else{
                    this.project.id = null;
                }
            },
            //加载高度
            initLoadHeight(height){
                this.heightTable = height-(occupyHeight) +("px");
            },
        },
        created() {

        }
    }
</script>

<style scoped>

  /*layout布局*/
  #components-layout-demo-basic {
    /*text-align: center;*/
  }
  #components-layout-demo-basic .ant-layout-header {
    background-color:transparent;
    height: 60px;
    line-height: 1.5;
    margin: 0px;
    padding: 0px;
  }
  #components-layout-demo-basic .ant-layout-footer {
    line-height: 1.5;
    /*position: fixed;*/
    /*left: 50%;*/
    /*bottom: 2%;*/
    /*transform: translateX(calc(-50% + 100px));*/
    text-align: center;
  }
  #components-layout-demo-basic .ant-layout-content {
    color: #fff;
    min-height: 120px;
    line-height: 120px;
  }
  #components-layout-demo-basic > .ant-layout {
    margin-bottom: 48px;
  }
  #components-layout-demo-basic > .ant-layout:last-child {
    margin: 0;
  }

</style>